<template>
    <div class="grid-box">
        <customBorder class="grid-item" title="月度订单统计">
            <GradientStackedArea v-if="Array.isArray(monthStacked.chartData) && monthStacked.chartData.length > 0" :data="monthStacked.chartData" />
        </customBorder>
        <customBorder class="grid-item" title="月度地区订单">
            <CapsuleChart class="full-height" :config="monthCapsule.config" :data="monthCapsule.seriesData" />
        </customBorder>
        <customBorder class="grid-item" title="月度分类订单">
            <CapsuleChart class="full-height" :config="monthCategory.config" :data="monthCategory.seriesData" />
        </customBorder>
        <customBorder class="grid-item" title="实时交易状态">
            <PieChart :data="realTranStatus.pieData" :config="realTranStatus.pieConfig" ref="pieRef" />
        </customBorder>
        <customBorder class="grid-item" title="实时物流状态">
            <StackedPercentBar class="full-height" :xAxisData="realLogistics.xAxisData" :series="realLogistics.barSeries" />
        </customBorder>
        <customBorder class="grid-item" title="实时订单权益放送">
            <RealtimeOrderList :columns="columns" :fetch-page="fetchOrderPage" :realtime-factory="realtimeFactory" />
        </customBorder>
        <customBorder class="grid-item" title=""></customBorder>
        <customBorder class="grid-item" title=""></customBorder>
        <customBorder class="grid-item" title=""></customBorder>
    </div>
</template>

<script lang="ts" setup>
import GradientStackedArea from "@/components/custom/GradientStackedArea.vue";
import CapsuleChart from "@/components/datav/capsule-chart";
import PieChart from "@/components/custom/PieChart.vue";
import StackedPercentBar from "@/components/custom/StackedPercentBar.vue";
import { useGradientStackedArea, useMonthCapsule, useMonthCategory, useRealTransactionStatus, useRealLogistics, useRealOrderList } from "./hooks/index";
import RealtimeOrderList from "@/components/RealtimeOrderList.vue"; // 实时订单列表

const monthStacked = useGradientStackedArea(); //
const monthCapsule = useMonthCapsule(); //
const monthCategory = useMonthCategory(); //
const realTranStatus = useRealTransactionStatus(); // 
const realLogistics = useRealLogistics(); //
const { fetchOrderPage, realtimeFactory,columns } = useRealOrderList(); // 
</script>
<style lang="scss" scoped>
/* —— 变量区 —— */
$gap: 10px; // 你想要的边距
$cols: 3; // 3×3 九宫格

/* —— 九宫格容器 —— */
.grid-box {
    display: grid;
    grid-template-columns: repeat($cols, 1fr); // 三列，每列 1fr
    grid-template-rows: repeat($cols, 1fr);
    gap: $gap; // 行列间距都是 20px
    padding: $gap; // 容器四周再留 20px 边距
    box-sizing: border-box; // padding 算在宽高内
    height: calc(100% - 64px);
    position: relative;
    top: -10px;
}

/* —— 每个格子 —— */
.grid-item {
    background: transparent;
    border-radius: 6px;
    // aspect-ratio: 1 / 1; // 正方形
    display: flex;
    color: #fff;
    align-items: stretch; /* 确保子元素拉伸以填充整个单元格 */
}
.full-height {
    height: 100%;
}
</style>
